<template>
  <Scroll class="listview"
          :data='dataList'
          ref='listView'
          :listenScroll='true'
          @scroll='scroll'>
    <ul>
      <li v-for="group in dataList" class='list-group' ref='listGroup'>
        <h2 class='list-group-title'>{{group.title}}</h2>
        <ul>
          <li @click='selectItem(item)' v-for="item in group.item" class='list-group-item'>
            <img class='avatar' v-lazy='item.avatar'>
            <span class='name'>{{item.name}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <!--touch 会对点击到的第一个元素响应-->
    <div
      class='list-shortcut' @touchstart.prevent.stop='onShortcutTouchStart'
      @touchmove.prevent.stop='onShortcutTouchMove'>
      <ul>
        <li v-for="(item,index) in shortcutList"
            :key="item.id"
            class='item'
            :data-index='index'
            :class='{current:selectIndex === index}'>
          {{ item }}
        </li>
      </ul>
    </div>
    <div class='list-fixed' v-show='fixedTitle' :style='{transform: fixedTop}'>
      <div class='fixed-title'>{{fixedTitle}}</div>
    </div>
  </Scroll>
</template>

<script>
  import Scroll from 'base/scroll/scroll'
  import { getData } from 'common/js/dom'

  const SHOUTCUT_HEIGHT = 18
  const TOP_HEIGHT = 30

  export default {
    name: '',
    components: {
      Scroll,
    },
    data() {
      return {
        selectIndex: 0,
        scrollY: -1,
        diff: 0,
      }
    },
    created() {
      this.touch = {}
      this.listHeight = []
    },
    props: {
      dataList: {
        type: Array,
        default: function () {
          return []
        },
      },
    },
    methods: {
      selectItem(item) {
        this.$emit('select',item)
      },
      onShortcutTouchStart(e) {
        let tIndex = getData(e.target, 'index')
        if (!tIndex) {
          return
        }
        let index = Number(tIndex)
        let firstTouch = e.touches[0]
        this.touch.y1 = firstTouch.pageY
        this.touch.anchorIndex = index
        this._scrollTo(index)
      },
      onShortcutTouchMove(e) {
        let firstTouch = e.touches[0]
        this.touch.y2 = firstTouch.pageY
        //获取偏移量
        let delta = (this.touch.y2 - this.touch.y1) / SHOUTCUT_HEIGHT | 0
        let anchorIndex = this.touch.anchorIndex + delta
        this._scrollTo(anchorIndex)
      },
      scroll(pos) {
        this.scrollY = pos.y
      },
      refresh(){
        this.$refs.listView.refresh()
      },
      _scrollTo(index) {
        if (index < 0 || !index) {
          index = 0
        }
        if (index > this.listHeight.length - 2) {
          index = this.listHeight.length - 2
        }
        this.$refs.listView.scrollToElement(this.$refs.listGroup[index], 0)
      },
      _calculateHeight() {
        this.listHeight = []
        const list = this.$refs.listGroup
        let height = 0
        this.listHeight.push(height)
        for (let i = 0; i < list.length; i++) {
          height += list[i].clientHeight
          this.listHeight.push(height)
        }
      },

    },
    watch: {
      dataList() {
        setTimeout(() => {
          this._calculateHeight()
        }, 20)
      },
      scrollY(newY) {
        const listHeight = this.listHeight
        if (newY >= 0) {
          this.selectIndex = 0
          return
        }
        for (let i = 0; i < listHeight.length; i++) {
          let height1 = listHeight[i]
          let height2 = listHeight[i + 1]
          if (!height2 || (-newY >= height1 && -newY < height2)) {
            this.selectIndex = i
            return
          }
        }
        this.selectIndex = 0
      },

    },
    computed: {
      shortcutList() {
        return this.dataList.map((group) => {
          return group.title.substr(0, 1)
        })
      },
      fixedTitle() {
        if (this.scrollY > 0) {
          return ''
        }
        return this.dataList[this.selectIndex] ? this.dataList[this.selectIndex].title : ''
      },
      fixedTop() {
        let off = TOP_HEIGHT - (this.listHeight[this.selectIndex + 1] + this.scrollY)
        if (off >= 0 && off <= 30) {
          return `translate3d(0,${-off}px,0)`
        }
        return 'translate3d(0,0,0)'
      },
    },

    mounted() {
    },
    destroyed() {
    },
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"

  .listview
    position: relative
    width: 100%
    height: 100%
    overflow: hidden
    background: $color-background
    .list-group
      padding-bottom: 30px
      .list-group-title
        height: 30px
        line-height: 30px
        padding-left: 20px
        font-size: $font-size-small
        color: $color-text-l
        background: $color-highlight-background
      .list-group-item
        display: flex
        align-items: center
        padding: 20px 0 0 30px
        .avatar
          width: 50px
          height: 50px
          border-radius: 50%
        .name
          margin-left: 20px
          color: $color-text-l
          font-size: $font-size-medium
    .list-shortcut
      position: absolute
      z-index: 30
      right: 0
      top: 50%
      transform: translateY(-50%)
      width: 20px
      padding: 20px 0
      border-radius: 10px
      text-align: center
      background: $color-background-d
      font-family: Helvetica
      .item
        padding: 3px
        line-height: 1
        color: $color-text-l
        font-size: $font-size-small
        &.current
          color: $color-theme
    .list-fixed
      position: absolute
      top: 0
      left: 0
      width: 100%
      .fixed-title
        height: 30px
        line-height: 30px
        padding-left: 20px
        font-size: $font-size-small
        color: $color-text-l
        background: $color-highlight-background
    .loading-container
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>
